<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-butterbar.html">
<link rel="import" href="../common/cr-button.html">
<link rel="import" href="../common/cr-dialog.html">
<link rel="import" href="../common/cr-toolbar.html">
<link rel="import" href="../selfie/cr-gif-selfie.html">
<link rel="import" href="cr-issue-editor.html">

<polymer-element name="cr-issue-publish-dialog" attributes="issue addAsReviewer">
    <template>
        <link rel="stylesheet" href="../common/common.css">
        <style>
            .issue-publish-label {
                font-weight: bold;
                color: #959595;
                -webkit-user-select: none;
                cursor: default;
            }

            .issue-publish-field,
            .issue-publish-label {
                padding: 0.5em 16px;
                display: -webkit-flex;
                display: flex;
            }

            @media (max-width: 600px) {
                .issue-publish-field,
                .issue-publish-label {
                    padding: 0.5em 8px;
                }

                .selfie-action {
                    display: none;
                }
            }

            h2 {
                font-size: 1em;
                color: #959595;
                margin: 0;
            }

            .cr-collapsible-header {
                margin: 0.5em 16px;
            }

            .file-header {
                margin: 0;
                padding: 0 16px;
                font-size: 1.1em;
                display: -webkit-flex;
                display: flex;
            }

            .file-header .file-name {
                flex: 1;
                -webkit-flex: 1;
            }

            .messages {
                border: 1px solid #dcdcdc;
                margin: 0.5em 16px;
            }

            .message {
                background-color: #ffd;
                border-bottom: 1px solid #dcdcdc;
                padding: 0.5em 16px;
            }

            .message:last-child {
                border-bottom: none;
            }

            .message-header {
                margin: 0;
                font-size: 1em;
            }

            .message-text {
                margin-top: 0.5em;
            }

            cr-toolbar label {
                margin-right: 16px;
            }

            cr-gif-selfie {
                min-width: 300px;
                flex-shrink: 0;
                -webkit-flex-shrink: 0;
            }
        </style>

        <dialog is="cr-dialog" id="dialog" on-cancel="{{ cancel }}">
            <cr-butterbar message="{{ butterbarMessage }}"></cr-butterbar>

            <h1>Publish Comments</h1>

            <cr-issue-editor
                id="editor"
                fields="cc reviewers"
                issue="{{ issue }}"
                errors="{{ errors }}"
                disabled?="{{ saving }}"></cr-issue-editor>

            <fieldset class="issue-publish-fields" disabled?="{{ sending }}">
                <label class="issue-publish-label" for="message">Message</label>
                <div class="issue-publish-field">
                    <textarea id="message" value="{{ message }}" rows="{{ issue.draftCount | editorHeight }}"></textarea>
                    <template if="{{ addSelfie }}">
                        <cr-gif-selfie on-gif-save="{{ handleGifSave }}"></cr-gif-selfie>
                    </template>
                </div>
            </fieldset>

            <template if="{{ issue.draftCount }}">
                <div id="drafts">
                    <cr-collapsible active="{{ draftsVisible }}">
                        <div class="cr-collapsible-header">
                            <a is="cr-action">
                                <template if="{{ !draftsVisible }}">
                                    Show Drafts
                                </template>
                                <template if="{{ draftsVisible }}">
                                    Hide Drafts
                                </template>
                            </a>
                        </div>
                        <!-- TODO(esprehn): This should use <cr-diff-message> and allow editing. -->
                        <template repeat="{{ draftPatchset in issue.draftPatchsets }}">
                            <template repeat="{{ file in draftPatchset.files }}">
                                <h3 class="file-header">
                                    <span class="file-name">{{ file.name }}</span>
                                    <span class="patchset">Patch {{ file.patchset.sequence }}</span>
                                </h3>
                                <div class="messages">
                                    <template repeat="{{ draft in file.drafts }}">
                                        <div class="message">
                                            <h4 class="message-header">Line {{ draft.line }}</h4>
                                            <div class="message-text">
                                                <cr-linkified-text text="{{ draft.text }}" pre></cr-linkified-text>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </template>
                    </cr-collapsible>
                </div>
            </template>

            <cr-toolbar>
                <button is="cr-button" primary on-tap="{{ handleSend }}">Send</button>
                <template if="{{ !issue.closed }}">
                    <template if="{{ !issue.owner.isCurrentUser }}">
                        <button is="cr-button" on-tap="{{ handleLgtm }}">LGTM</button>
                        <template if="{{ !issue.commit }}">
                            <button is="cr-button" on-tap="{{ handleLgtmAndCommit }}">LGTM + CQ</button>
                        </template>
                    </template>
                    <template if="{{ issue.owner.isCurrentUser && !issue.commit }}">
                        <button is="cr-button" on-tap="{{ handleSendAndCommit }}">Send + CQ</button>
                    </template>
                </template>
                <button is="cr-button" on-tap="{{ cancel }}">Cancel</button>
                <template if="{{ !issue.owner.isCurrentUser }}">
                    <label>
                        <input type="checkbox" checked="{{ addAsReviewer }}">
                        Add as reviewer
                    </label>
                </template>
                <label class="selfie-action">
                    <input type="checkbox" checked="{{ addSelfie }}">
                    Add a selfie!
                </label>
            </cr-toolbar>
        </dialog>
    </template>
    <script>
        Polymer({
            created: function() {
                this.issue = null;
                this.message = "";
                this.butterbarMessage = "";
                this.sending = false;
                this.addAsReviewer = true;
                this.draftsVisible = false;
                this.addSelfie = false;
            },
            cancel: function(event) {
                if (this.$.editor.dismissAutocomplete()) {
                    event.preventDefault();
                    return;
                }
                this.close();
            },
            reset: function() {
                this.$.editor.reset();
                this.sending = false;
                this.addAsReviewer = true;
                this.butterbarMessage = "";
                this.message = "";
                this.$.editor.dismissAutocomplete();
                this.draftsVisible = false;
            },
            close: function() {
                this.reset();
                this.$.dialog.close();
            },
            handleSend: function(event) {
                this.send();
            },
            handleSendAndCommit: function(event) {
                this.send({commit: true});
            },
            handleLgtm: function(event) {
                this.send({lgtm: true});
            },
            handleLgtmAndCommit: function(event) {
                this.send({
                    lgtm: true,
                    commit: true,
                });
            },
            send: function(options) {
                var data = this.$.editor.createEditData();
                data.message = this.message;
                data.addAsReviewer = this.addAsReviewer;
                data.publishDrafts = true;
                Object.merge(data, options);
                this.sending = true;
                this.butterbarMessage = "Saving...";
                this.issue.publish(data)
                    .then(this.sendSuccess.bind(this))
                    .catch(this.sendFailure.bind(this));
            },
            sendSuccess: function() {
                this.fire("issue-refresh");
                this.close();
            },
            sendFailure: function(error) {
                // TODO(esprehn): We should show an better error message.
                this.sending = false;
                this.butterbarMessage = "Error: " + error.message;
            },
            showModal: function() {
                if (!this.issue)
                    return;
                this.issue.updateDraftFiles();
                this.reset();
                this.$.dialog.showModal();
            },
            editorHeight: function(draftCount) {
                return draftCount ? 15 : 20;
            },
            handleGifSave: function(event) {
                var text = "\n\nThis is how I feel about this patch: " + event.detail.url;
                this.message = (this.message + text).trim();
            },
        });
    </script>
</polymer-element>
